<template>
	<view class="container" v-if="canvasShow">
		<!-- <view class="box" id="qrbtn">
			<image src="https://apitest.hrzhizhang.com/file/2020-11-27/qrbg.jpg" class="bg" mode="widthFix">
			<image :src="image" class="png" mode="aspectFit" show-menu-by-longpress="true">
		</view>
		 -->

		<canvas canvas-id="mycanvas" style="width: 375px;height: 577px;"></canvas>
		<view class=" bottom">
			<view class="content">
				<view class="cu-btn round bg-blue" @tap="saveQR()">保存分享</view>
			</view>
		</view>
	</view>

</template>

<script>
	// import htmlToCavas from '@/components/dyw-html2image/html2image'
	export default {
		data() {
			return {
				trainInfo:[],
				worksList: [],
				userInfo: [],
				image:'',
				imgurl:'',
				bgimage:'',
				scrollHeight:'460px',
				canvasShow:false,
			};
		},
		onReady: function(res) {
			// var ctx = wx.createCanvasContext('mycanvas')
			// console.log('绘制');
			// const ctx = wx.createCanvasContext('mycanvas')
			// let t = this;
			// ctx.setFillStyle("#fff");
			// ctx.fillRect(0, 0, 300, 560);
			// ctx.draw();
			// t.canvasShow = true;
			// wx.chooseImage({
			//   success: function(res){
			// 	ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
			// 	ctx.draw(false, () => {
			// 		wx.canvasToTempFilePath({
			// 			canvasId: 'mycanvas',
			// 			success: res => {
			// 				///************************************************有个保存图片到本地的方法
			// 				this.imgurl = res.tempFilePath;
			// 				this.canvasShow = true;
			// 				uni.hideLoading();
			// 			},
			// 			fail: () => {
			// 				uni.showToast({
			// 					title: '图片加载失败',
			// 					duration: 2000
			// 				});
			// 			}
			// 		});
			// 	});

			// 	t.canvasShow = true;
			//   }
			// })
		},
		onLoad(option) {
			this.userInfo = uni.getStorageSync('userInfo');
			uni.showLoading();
      this.createQR()
			// if(this.userInfo['path']==undefined||!this.userInfo['path']){
			// 	this.createQR()
			// }
			// else{
			// 	this.image = this.userInfo.path;
			// 	uni.downloadFile({
			// 		url: this.image,
			// 		success: (res) => {
			// 			if (res.statusCode === 200) {
			// 				console.log('下载成功');
			// 				this.image = res.tempFilePath;
			// 			}
			// 		}
			// 	});
			// 	uni.downloadFile({
			// 		url: 'https://apitest.hrzhizhang.com/file/2020-11-27/qrbg.jpg',
			// 		success: (res) => {
			// 			if (res.statusCode === 200) {
			// 				console.log('下载成功');
			// 				this.bgimage = res.tempFilePath;
			// 				this.canvasImage()
			// 			}
			// 		}
			// 	});
			// }
			let obj = uni.getSystemInfoSync();
			let clientHeight = obj.screenHeight;
			this.scrollHeight = clientHeight-50+'px';


			// this.loadData();
		},
		methods: {
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */

			async createQR() {
				// let uid = 1

				let uid = this.userInfo['id']
				let param = {
					cid:uid
					};
				let that = this;
				let data = await this.$http.post(
					'wx/getWxCode', //可以直接放链接(将不启用全局定义域名)
					param,
				);
				console.log(data);
				this.image = data;
				uni.downloadFile({
					url: data,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							this.image = res.tempFilePath;
						}
						let baseUrl = this.$http.site;
						console.log(this.$http)
						uni.downloadFile({
							url: baseUrl+'file/2020-11-27/qrbg.jpg',
							success: (res) => {
								console.log('下载成功');
								if (res.statusCode === 200) {

									this.bgimage = res.tempFilePath;
									this.canvasImage()
								}
							},
							fail: () => {
								uni.showToast({
									title: '图片加载失败',
                  icon:'none',
									duration: 2000
								});
								uni.hideLoading();
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: '图片加载失败',
							duration: 2000
						});
						uni.hideLoading();
					}
				});


			},

			saveQR(){
				console.log(this.imgurl)
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: res => {
						///************************************************有个保存图片到本地的方法
						this.imgurl = res.tempFilePath;

						uni.saveImageToPhotosAlbum({
							filePath: this.imgurl,
							success: () => {
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							},
							fail: () => {
								uni.showToast({
									title: '保存失败',
									duration: 2000,
									icon: "none"
								});
							}
						});
					},
					fail: () => {
						uni.showToast({
							title: '图片加载失败',
							duration: 2000
						});
					}
				});

			},
			canvasImage() {
				console.log('绘制');
				const ctx = uni.createCanvasContext('mycanvas')

				// wx.chooseImage({
				//   success: function(res){
				// 	ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
				// 	ctx.draw()
				//   }
				// })
				let myCanvas = uni.createCanvasContext('mycanvas', this);
				// 绘制背景
				myCanvas.drawImage(this.bgimage, 0, 0, 375, 577);
				//*******************************************************设置二维码大小就好了位置
				myCanvas.drawImage(this.image, 215, 355, 115, 115);
				let fontSize = 70;
				myCanvas.font = `bold ${fontSize}px Arial`;
				myCanvas.fillStyle = '#ff4d30'; //填充线样式
				// myCanvas.fillText('邀请好友领积分', 130, 250);
				myCanvas.draw();
				uni.hideLoading();
				this.canvasShow = true;

			},

		},

	}
</script>

<style lang="scss">

	.box{
		// position: fixed;
		left: 0;
		z-index: 990;

		.flex{
			margin: 0 15px;
		}
	}
	.png{
		right: -213px;
		top: -340px;
		width: 130px;
		height: 130px;
	}
	.bg{
		width: 375px;
		height: 577px;
	}
	.bottom{
		width: 100%;
		margin-bottom: 20px;
		margin-top: 20px;
		.cu-btn{
			margin: 0 10%;
			width: 80%;
			height: 40px;
		}
	}
	page {
		background: #F6F6F6;
	}


</style>
